<template>
	<view>
		<scroll-view scroll-y="true" style="height:calc(100vh - 660rpx);">
			<view class="all-content" v-for="it in dataList" @click="fnGoDetail(it)" :key="it.id">
				<view class="top-content-st">
					<view class="top-ring">
						{{getContent(it) || ''}}
					</view>
					<view class="top-lv" :class="{'red':it.rankClass === 'tall','orange':it.rankClass === 'central', 'blue':it.rankClass === 'bottom' || it.rankClass === 'nought'}">{{it.diseaseGradeName || ''}}{{it.diseaseNo || ''}}</view>
				</view>
				<view class="bottem-ev">{{it.diseaseStatus}}</view>
				<view class="top-content">
					<view class="bottem-time" style="color: #6A819E;">提交时间：{{getDate(it.createDate)}} ( {{it.createUserName}} )</view>
					<u-checkbox-group>
						<u-checkbox :checked="it.isChecked" @change="changeRadio($event,it)" shape="circle" active-color="blue">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<view v-if="dataList.length === 0">
				<u-empty mode="data" text="数据为空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</scroll-view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button  @click="fnGoRepairPage" class="button-primary">维修派单</button>
			</view>
		</view>
	</view>

</template>

<script>
	import mixins from '@/utils/mixins.js'
	export default {
		name: 'notDispatch',
		mixins: [mixins],
		props: {
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			},
			pmInfo:{
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				value: 1
			}
		},
		methods: {
			fnGoDetail(item) {
				uni.navigateTo({
					url: `/subpackage-enginner/pages/engineeringMaintenance/disease_dispatch/diseaseDetail?id=${item.id}&type=${item.mileage}`
				})
			},
			fnGoRepairPage() {
				let data = this.dataList.filter(it => it.isChecked).map(item => item.id)
				console.log(data, 'data22')
				if (data.length === 0) return uni.showToast({
					title: '请选择需要派单的数据!',
					icon: 'none'
				})
				uni.navigateTo({
					url: `/subpackage-enginner/pages/engineeringMaintenance/disease_dispatch/repairDispatch?data=${JSON.stringify(data)}&pmInfo=${JSON.stringify(this.pmInfo)}`
				})
			},
			changeRadio(val, item) {
				item.isChecked = val
			},

		}
	}
</script>

<style lang="scss" scoped>
	.grey  {background-color:#d7d7d7;}
	.blue  {background-color:#0297d7;}
	.orange{background-color:#f59a23;}
	.green {background-color:#03b615;}
	.red   {background-color:#ff6e4a;}
	.all-content {
		width: 686rpx;
		height: 160rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		border-bottom: 2rpx dashed #f4f4f5;

		.top-content-st {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.top-ring {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #445469;
				line-height: 38rpx;
				margin-right: 20rpx;
				// max-width: 320rpx;
				width: auto;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				display: flex;
				align-items: center;
			}

			.top-lv {
				padding: 6rpx 20rpx;
				width: auto;
				// clip-path: polygon(100% 0, 85% 100%, 0% 100%, 10% 0%);
				clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
				// border-radius: 13px 4px;
				// width: 62rpx;
				height: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;
				// background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%);
				text-align: center;
			}

			.top-lv.red {
				background: linear-gradient(90deg, #FF2B2B 0%, #FF603D 100%);

			}

			.top-lv.orange {
				background: linear-gradient(90deg, #FF882B 0%, #FF9F3D 100%);
			}

			.top-lv.blue {
				background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%);
			}
		}

		.top-content {
			display: flex;
			justify-content: space-between;

			.top-ring {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #445469;
				line-height: 38rpx;
				margin-right: 20rpx;
			}

			.top-time {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #6A819E;
				line-height: 40rpx;
			}

			.top-lv {
				// clip-path: polygon(100% 0, 85% 100%, 0% 100%, 10% 0%);
				clip-path: polygon(10rpx 0, 100% 0, calc(100% - 10rpx) 52rpx, 0% 52rpx);
				width: 62rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;
				background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%);
				text-align: center;
			}
		}

		.bottem-ev {
			margin: 10rpx 0;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #6A819E;
			line-height: 40rpx;
			// max-width: 500rpx;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.btn_box {
		height: 100rpx;
		.btn_group {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	}
</style>
